<template>
  <div>
    <el-form
      :model="tostayin_form"
      ref="tostayin_form"
      :rules="rules"
      label-width="120px"
      :inline="false"
      style="width: 470px"
      size="normal"
    >
      <el-form-item label="住户" prop="house_guest_id">
        <el-select
          v-model="tostayin_form.house_guest_id"
          placeholder="请选择"
          clearable
          filterable
          style="width: 200px"
          @change="getHouseDate"
        >
          <el-option
            v-for="(item, index) in house_guest_name_list"
            :key="item.guest_id"
            :label="item.guest_name"
            :value="item.guest_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传人脸" prop="guest_photo">
        <el-upload
          class="avatar-uploader"
          action=""
          drag
          :on-remove="removePhoto"
          :auto-upload="false"
          :on-change="setPhoto"
          :limit="1"
        >
          <img
            v-if="tostayin_form.guest_photo"
            :src="tostayin_form.guest_photo"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="租赁合同期限" prop="house_date">
        <el-date-picker
          v-model="tostayin_form.house_date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :disabled="true"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit" style="width: 100%"
          >确定入住</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import utils from "@/store/utils.js";
import Compressor from "compressorjs";

export default {
  props: ["house_id", "building_id"],
  data() {
    return {
      tostayin_form: {
        house_guest_id: "",
        house_date: ["", ""],
        guest_photo: "",
      },
      rules: {
        house_guest_id: [
          { required: true, message: "请选择住户", trigger: "blur" },
        ],
        guest_photo: [
          {
            required: false,
            message: "请上传住户人脸，作为门禁通行使用",
            trigger: ["change", "blur"],
          },
        ],
      },
      house_guest_name_list: [],
    };
  },
  methods: {
    getGuestNameList() {
      this.$axios({
        method: "post",
        url: "/api/guestapi/dispatcher",
        data: {
          action: "like",
          guest_name: "",
          openid: localStorage.getItem("unionid"),
        },
      }).then((res) => {
        this.house_guest_name_list = res.data.data;
      });
    },
    getHouseDate(val) {
      this.$axios({
        method: "post",
        url: "/api/guestapi/dispatcher",
        data: {
          action: "include",
          type: "guest_id",
          guest_id: val,
        },
      }).then((res) => {
        this.tostayin_form.house_date = [
          res.data.data[0].guest_date1,
          res.data.data[0].guest_date2,
        ];
      });
    },
    async dataSubmit() {
      return new Promise((resolve) => {
        this.$axios({
          method: "post",
          url: "/api/houseapi/dispatcher",
          data: {
            action: "re",
            key: ["house_guest_id", "house_type"],
            value: [this.tostayin_form.house_guest_id, 1],
            house_id: this.house_id,
            house_date1: this.tostayin_form.house_date[0],
            house_date2: this.tostayin_form.house_date[1],
          },
        }).then((res) => {
          resolve(res.data);
        });
      });
    },
    async photoSubmit() {
      return new Promise((resolve) => {
        this.$axios({
          method: "post",
          url: "/api/HIKapi/dispatcher",
          data: {
            action: "add",
            building_id: this.building_id,
            guest_id: this.tostayin_form.house_guest_id,
            face: this.tostayin_form.guest_photo.split(",")[1],
            user_mode:Number(this.$store.state.mode) 
          },
        }).then((res) => {
          resolve(res.data);
        });
      });
    },
    submit() {
      this.$refs["tostayin_form"].validate((res) => {
        if (res) {
          // 先上传图片，成功后再弄入住
          if (
            this.tostayin_form.guest_photo != "" &&
            this.tostayin_form.guest_photo != null
          ) {
            this.photoSubmit().then((res) => {
              if (res.ret == 0) {
                // 上传入住数据
                this.dataSubmit().then((res) => {
                  if (res.ret == 0) {
                    this.$message.success("入住成功");
                    this.$emit("closeDrawer");
                    this.$emit("getList");
                  } else if (res.ret == 2) {
                    this.$message.error(res.msg);
                  } else {
                    this.$message.error("入住失败");
                  }
                });
              } else if (res.ret == 1) {
                this.$message.error(res.msg);
              } else if (res.ret == 2) {
                this.$message.error(res.msg);
              } else {
                this.$message.error("入住失败，请重新上传人脸照片");
              }
            });
          } else {
            // 上传入住数据
            this.dataSubmit().then((res) => {
              if (res.ret == 0) {
                this.$message.success("入住成功");
                this.$emit("closeDrawer");
                this.$emit("getList");
              } else if (res.ret == 2) {
                this.$message.error(res.msg);
              } else {
                this.$message.error("入住失败");
              }
            });
          }
        }
      });
    },
    setPhoto(val) {
      const imageConversion = require("image-conversion"); // 导入依赖
      // 压缩图片
      imageConversion
        .compressAccurately(val.raw, {
          size: 0.18 * 1024,
          type: "image/jpeg",
          width: 1200,
          height: 1596,
        })
        .then((res) => {
          //The res in the promise is a compressed Blob type (which can be treated as a File type) file;
          new Compressor(res, {
            success: (data) => {
              utils.fileToBase64(data, (res) => {
                this.tostayin_form.guest_photo = res;
              });
            },
          });
        });
    },
    removePhoto() {
      this.tostayin_form.guest_photo = "";
    },
  },
  mounted() {
    this.getGuestNameList();
  },
};
</script>

<style scoped>
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 266px;
  line-height: 266px;
  text-align: center;
}
.avatar,
.el-upload-dragger {
  width: 200px;
  height: 266px;
  display: block;
}
</style>